import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import screen from '../../../../utils/screen'

export default class extends PureComponent {
  static propTypes = {
    summary: PropTypes.any
  }
  render() {
    const { summary } = this.props;
    return (
      <TouchableOpacity activeOpacity={0.5}  onPress={() => {this.invokeClick(summary)}}>
        <View style={styles.summary}>
          <View style={[styles.lineCell, styles.one]}>
            <Text style={styles.lineFont}>{summary.name}</Text>
          </View>
          <View style={[styles.lineCell, styles.two]}>
            <Text style={styles.lineFont}>{summary.amount}</Text>
          </View>
          <View style={[styles.lineCell, styles.three]}>
            <Text style={styles.lineFont}>{summary.yoy}</Text>
          </View>
          <View style={[styles.lineCell, styles.three]}>
            <Text style={styles.lineFont}>{summary.qoq}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  invokeClick = (line) => {
    const linked = line.linked
    const fullParams = Object.assign({}, linked, {
      timeD: this.props.timeD,
      xtype: this.props.xtype
    })
    console.log("fullParams ", fullParams)
    if(line.linked !== undefined) {
      this.props.navigation.navigate(linked.linkedName, fullParams)
    }
  }
}

const styles = StyleSheet.create({
  summary: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    height: screen.pxToDp(100)
  },
  lineCell: {
    justifyContent: 'center',
    marginHorizontal:screen.pxToDp(5)
  },
  lineFont: {
    color: '#636363',
    fontSize: screen.pxToDp(30)
  },
  one: {
    width: screen.pxToDp(260),
    paddingLeft: screen.pxToDp(31)
  },
  two: {
    flex: 3
  },
  three: {
    flex: 2
  },
  line: {
    justifyContent: 'center'
  }
})
